<template>
  <div>
    <tool-bar nav="" title='时间转换'></tool-bar>


    <el-card>
      <template #header>
        <div class="card-header">
          <span>当前时间</span>
        </div>
      </template>
      <div class="card">

        <kv label="当前时区">
          <div>{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}</div>
        </kv>

        <kv label="当前时区时间">
          <div>{{ $data.now }}</div>
        </kv>

      </div>
    </el-card>


    <el-card>

      <kv label="北京时间">
        <el-input v-model="$data.bjTime"></el-input>
      </kv>


      <kv label="转换">
        <el-button @click="to_moxige_click">转为墨西哥时间⤵</el-button>

        <el-button @click="to_bj_click">转为北京时间⤴</el-button>
      </kv>


      <kv label="墨西哥时间">
        <el-input v-model="$data.moxigeTime"></el-input>
      </kv>


    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.card {
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid {
  position: relative;
  margin-left: 20px !important;
  margin-top: 20px !important;

  display: flex;

  ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
    min-height: 60vh !important;
    height: 70vh;
  }
}

.op_column {
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  align-content: space-around;
  position: relative;


  button {
    display: block;
    margin: 5px 2px;
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}

</style>
<script setup>
/**
 * Created by CodeGenerator
 */


defineOptions({
  name: "array-js",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  timeZone: "",
  now: "",
  bjTime: "",
  targetZone: "",
  utcTime: "",
  moxigeTime: "",
});

const to_moxige_click = function () {
  var moxigeTime = new Date($data.bjTime);
  moxigeTime.setTime(moxigeTime.getTime() - 3600_000 * 14);
  $data.moxigeTime = moxigeTime.toLocaleString();
}

const to_bj_click = function () {
  var bjTime = new Date($data.moxigeTime);
  bjTime.setTime(bjTime.getTime() + 3600_000 * 14);
  $data.bjTime = bjTime.toLocaleString();
}

onMounted(function () {
  const now = new Date();
  $data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const options = {timeZone: $data.timeZone};
  $data.now = now.toLocaleString(undefined, options);
  $data.bjTime = $data.now
})


</script>
